<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>文字聊天室</title>
        <style type="text/css">
            input#chat {
                width: 410px
            }

            #console-container {
                width: 400px;
            }

            #console {
                border: 1px solid #CCCCCC;
                border-right-color: #999999;
                border-bottom-color: #999999;
                height: 170px;
                overflow-y: scroll;
                padding: 5px;
                width: 100%;
            }

            #console p {
                padding: 0;
                margin: 0;
            }
        </style>
        <script type="application/javascript">


            var Chat = {};

            Chat.socket = null;

            Chat.connect = (function(host) {
            if ('WebSocket' in window) {
            Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
            Chat.socket = new MozWebSocket(host);
            } else {
            Console.log('Error: WebSocket is not supported by this browser.');
            return;
            }

            Chat.socket.onopen = function () {
            Console.log('Info: WebSocket 连接已建立.');
            document.getElementById('chat').onkeydown = function(event) {
            if (event.keyCode == 13) {
            Chat.sendMessage();
            }
            };
            };

            Chat.socket.onclose = function () {
            document.getElementById('chat').onkeydown = null;
            Console.log('Info: WebSocket 关闭.');
            };

            Chat.socket.onmessage = function (message) {
            Console.log(message.data);
            };
            });

            Chat.initialize = function() {
            if (window.location.protocol == 'http:') {
            Chat.connect('ws://' + window.location.host + '/WebSocketDemo/chat');
            } else {
            Chat.connect('wss://' + window.location.host + '/WebSocketDemo/chat');
            }
            };

            Chat.sendMessage = (function() {
            var message = document.getElementById('chat').value;
            if (message != '') {
            Chat.socket.send(message);
            document.getElementById('chat').value = '';
            }
            });

            var Console = {};

            Console.log = (function(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            console.appendChild(p);
            while (console.childNodes.length > 25) {
            console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
            });

            Chat.initialize();

           

        </script>
    </head>
    <body>
        
        <div>
            <p>
                <input type="text" placeholder="输入信息并单击回车键来发送" id="chat" />
            </p>
            <div id="console-container">
                <div id="console"/>
            </div>
        </div>
    </body>
</html>
